<%@page import="java.util.LinkedList"%>
<%@page import="youleche.com.model.MHistoryInfo"%>
<%@page import="java.util.List"%>
<%@page import="youleche.com.controler.controler.PageDataForBussinessControler"%>
<%@ page language="java" contentType="text/html;charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@include file="/WEB-INF/header.jsp" %>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>美乐车-全国最大的车辆信息交易平台</title>
<link href="${ctx}/image/meileche.jpg" rel="shortcut icon"/>
<meta name="description" content="">
<link rel="stylesheet" rev="stylesheet" href="${ctx}/css/history.css"
	type="text/css" media="screen">
<link rel="stylesheet" rev="stylesheet" href="${ctx}/css/home.css"
	type="text/css" media="screen">
<script src="${ctx}/js/common.js" type="text/javascript"></script>
<script type="text/javascript">
	var _gaq = _gaq || [];
	_gaq.push([ '_setAccount', 'UA-11293844-1' ]);
	_gaq.push([ '_trackPageview' ]);

	(function() {
		var ga = document.createElement('script');
		ga.type = 'text/javascript';
		ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl'
				: 'http://www')
				+ '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(ga, s);
	})();
</script>
</head>
<body>
<%@include file="top.jsp" %>
<%@include file="nav.jsp" %>
	<div id="wrapper">
		
<div id="DY-container">
	<div id="DY-content">
		<div id="DY-content-inner">
			<div id="DY-post-title">
				<h1>
					<a href="history.jsp" rel="bookmark">版本历程</a>
				</h1>
			</div>
			<dd class="post-info">
<!--演示内容开始-->
<script type="text/javascript" src="${ctx}/js/licheng.js"
	_ue_org_tagname="script"></script>
<style type="text/css" _ue_org_tagname="style">
.demo {
	width: 100%;
	margin: 0 auto 0 auto;
}
/*history*/
.demo .history {
	background: url(${ctx}/image/licheng05.gif) repeat-y
		187px 0;
	overflow: hidden;
	position: relative;
}

.demo .history-date {
	overflow: hidden;
	position: relative;
}

.demo .history-date h4 {
	background: #F7F3ED url(${ctx}/image/licheng02.gif)
		no-repeat 158px 0;
	height: 59px;
	font-size: 22px;
	font-family: 微软雅黑;
	font-weight: normal;
	padding-left: 45px;
	margin-bottom: 74px;
}

.demo .history-date h4.first {
	position: absolute;
	left: 0;
	top: 0;
	width: 935px;
	z-index: 99;
}

.demo .first img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

.demo .history-date h4 a {
	color: #00bbff;
	display: inline-block;
	*display: inline;
	zoom: 1;
	background: url(${ctx}/image/licheng04.gif) no-repeat
		right 50%;
	padding-right: 17px;
	margin: 21px 97px 0 0;
}

.demo .history-date h4 a:hover {
	text-decoration: none;
}

.demo .history-date h4 img {
	vertical-align: -5px;
}

.demo .history-date h4.date02 {
	background: none;
}

.demo .history-date ul li {
	background: url(${ctx}/image/licheng03.gif) no-repeat
		180px 0;
	padding-bottom: 50px;
	zoom: 1;
}

.demo .history-date ul li.last {
	padding-bottom: 0;
}

.demo .history-date ul li:after {
	content: " ";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.demo .history-date ul li h5 {
	float: left;
	width: 168px;
	text-align: right;
	padding-right: 19px;
	color: #c3c3c3;
	font: normal 18px/16px Arial;
}

.demo .history-date ul li h5 strong {
	display: block;
	color: #d0d0d0;
	font-size: 12px;
}

.demo .history-date ul li dl {
	float: left;
	padding-left: 41px;
	margin-top: -5px;
	font-family: 微软雅黑;
}

.demo .history-date ul li dl dt {
	font: 18px/20px 微软雅黑;
	color: #737373;
}

.demo .history-date ul li dl dt strong {
	display: block;
	color: #787878;
	font-size: 12px;
}

.demo .history-date ul li.red h5 {
	color: #E82A21;
}

.demo .history-date ul li.red h5 strong {
	color: #E82A21;
}

.demo .history-date ul li.red dl {
	margin-top: -8px;
}

.demo .history-date ul li.red dl dt {
	font-size: 30px;
	line-height: 28px;
}

.demo .history-date ul li.red dl dt a {
	display: inline-block;
	*display: inline;
	zoom: 1;
	overflow: hidden;
	vertical-align: middle;
	margin-left: 12px;
}

.demo .history-date ul li.red dl dd {
	padding-top: 20px;
	display: none;
}

.demo .history-date ul li.red dl dd img {
	float: left;
}

.demo .history-date ul li.red dl dd p {
	overflow: hidden;
	zoom: 1;
	line-height: 21px;
	color: #787878;
}

.demo .history-date h4.first .more-history {
	font-size: 16px;
	background: transparent;
	margin-left: 30px;
}

.demo .history-date h4.first .more-history:hover {
	text-decoration: underline;
}

* body .demo .history-date ul li dl dt {
	_font-size: 12px !important;
	_font-weight: bold;
}

* body .demo .history-date ul li dl dt strong {
	_font-weight: normal !important;
}

* body .demo .history-date ul li.red dl dt a {
	_background: transparent !important;
	*background: transparent !important;
	*font-size: 12px !important;
	_font-weight: normal !important;
}
</style>
<script type="text/javascript" _ue_org_tagname="script">
	$(function() {
		systole();
	});

	function systole() {
		if (!$(".history").length) {
			return;
		}
		var $warpEle = $(".history-date"), $targetA = $warpEle
				.find("h4 a,ul li dl dt a"), parentH, eleTop = [];

		parentH = $warpEle.parent().height();
		$warpEle.parent().css({
			"height" : 59
		});

		setTimeout(
				function() {

					$warpEle
							.find("ul")
							.children(
									":not('h4:first')")
							.each(
									function(idx) {
										eleTop
												.push($(
														this)
														.position().top);
										$(this)
												.css(
														{
															"margin-top" : -eleTop[idx]
														})
												.children()
												.hide();
									}).animate({
								"margin-top" : 0
							}, 1600).children()
							.fadeIn();

					$warpEle.parent().animate({
						"height" : parentH
					}, 2700);

					$warpEle
							.find("ul")
							.children(
									":not('h4:first')")
							.addClass("bounceInDown")
							.css(
									{
										"-webkit-animation-duration" : "2s",
										"-webkit-animation-delay" : "0",
										"-webkit-animation-timing-function" : "ease",
										"-webkit-animation-fill-mode" : "both"
									}).end().children(
									"h4").css({
								"position" : "relative"
							});

				}, 600);

		$targetA.click(function() {
			$(this).parent().css({
				"position" : "relative"
			});
			$(this).parent().siblings().slideToggle();
			$warpEle.parent().removeAttr("style");
			return false;
		});
	};
</script>
	<%
	List<MHistoryInfo> list = PageDataForBussinessControler.getHistoryInfoList();
	%>
						<div class="demo">
							<div style="height: auto;" class="history">
							<%
								List<String> yearList = new LinkedList<String>();

								if(list != null && list.size() > 0){
									for(int i =0; i< list.size(); i++){
										if(!yearList.contains(list.get(i).getAddTime().substring(0,4))){
											yearList.add(list.get(i).getAddTime().substring(0,4));
										}
									}
								}
								
								if(yearList.size() > 0){
									%>
									<div class="history-date">
													<h4 style="position: relative;" class="first">
														<a href="http://www.meileche.com/history.jsp">2014年</a><strong
															class="first" style="position: relative;"><img
															src="image/licheng01.gif" alt="美乐车版本历程">
														</strong>
													</h4>
													<ul>
									<%
									for(int m=0; m < yearList.size(); m ++){
										for(int n=0 ; n< list.size(); n++){
											if(list.get(n).getAddTime().contains(yearList.get(m))){
												%>
												<li
													style="margin-top: 0px; -webkit-animation: 2s ease 0ms both;"
													class="red bounceInDown"><p style="display: block;">
														<br>
													</p>
													<h5 style="display: block;">
														<%=list.get(n).getAddTime().substring(5,10) %><strong><%=yearList.get(m)%></strong>
													</h5>
													<dl style="display: block;">
														<dt>
															<%= list.get(n).getA1() %><strong><%= list.get(n).getVersionDesc() %></strong>
														</dt>
													</dl>
													<p style="display: block;">
														<br>
													</p>
												</li>
												<%
													if((n+1)< list.size()){
														if(!list.get(n +1).getAddTime().contains(yearList.get(m))){
															%>
																	</ul>
															<% 
														}													
													}
											}else{
												%>
												<div class="history-date">
													<h4 style="position: relative;" class="first">
														<a href="http://www.meileche.com/history.jsp">2014年</a><strong
															class="first" style="position: relative;"><img
															src="image/licheng01.gif" alt="美乐车版本历程">
														</strong>
													</h4>
													<ul>
													<li
														style="margin-top: 0px; -webkit-animation: 2s ease 0ms both;"
														class="red bounceInDown"><p style="display: block;">
															<br>
														</p>
														<h5 style="display: block;">
															<%=list.get(n).getAddTime().substring(5,10) %><strong><%=yearList.get(m)%></strong>
														</h5>
														<dl style="display: block;">
															<dt>
																<%= list.get(n).getA1() %><strong><%= list.get(n).getVersionDesc() %></strong>
															</dt>
														</dl>
														<p style="display: block;">
															<br>
														</p>
													</li>
												<%
											}
											
											
											if(!list.get(n).getAddTime().contains(yearList.get(m))){
												%>
														</ul>
													</div>
												<% 
											}
										}
									}
								}
							%>
								
							</div>
						</div>
					</div>
					</dd>
				</div>
			</div>
		</div>
	</div>
	<%@include file="foot.jsp" %>
</body>
>